<template>
  <div style="display: flex">
    <div style="width: 50%; background-color: rgb(240, 242, 245)">
      <div style="display: flex; align-items: center; width: 99%">
        <svg-icon
          class-name="icon"
          icon-class="pdf02"
          style="transform: scale(1.5); z-index: 999; margin: 20px"
        />
        <el-tooltip
          class="item"
          effect="dark"
          :content="document"
          placement="top-start"
        >
          <p
            style="
              white-space: nowrap;
              max-width: 200px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ document }}
          </p>
        </el-tooltip>
        <svg-icon
          class-name="icon"
          icon-class="download02"
          style="
            transform: scale(1.5);
            z-index: 999;
            margin: 20px;
            margin-left: auto;
            cursor: pointer;
          "
          @click="download()"
        />
        <p
          style="
            font-size: 15px;
            cursor: pointer;
            color: rgb(25, 149, 247);
            margin-right: 10px;
          "
        >
          识别当前页
        </p>
        <el-upload
          :action="fileUrl"
          :on-success="uploadFile"
          :show-file-list="false"
          :headers="headers"
        >
          <el-button type="text">更改</el-button>
        </el-upload>
      </div>
      <div
        class="imageView"
        @mouseenter="isHovered = true"
        @mouseleave="isHovered = false"
      >
        <svg-icon
          v-if="isHovered"
          class-name="icon"
          icon-class="right"
          @click="nextPage"
          style="
            transform: scale(2);
            position: absolute;
            top: 45%;
            z-index: 999;
            right: 10px;
            cursor: pointer;
          "
        />
        <svg-icon
          v-if="isHovered"
          class-name="icon"
          icon-class="left"
          @click="prePage"
          style="
            transform: scale(2);
            position: absolute;
            top: 45%;
            z-index: 999;
            left: 10px;
            cursor: pointer;
          "
        />
        <div class="pdf-container">
          <pdf
            :page="pageNum"
            :src="url"
            @progress="loadedRatio = $event"
            @num-pages="pageTotalNum = $event"
            style="width: 80vw; margin-left: 10px"
          ></pdf>
        </div>
      </div>
      <div style="margin: 10px; color: rgb(110, 114, 115)">
        当前页数：{{ pageNum }} / {{ pageTotalNum }}
      </div>
    </div>
    <div style="width: 25%; margin: 10px; height: 680px; overflow: auto">
      <div style="display: flex; align-items: center; margin-bottom: 10px">
        <div
          style="
            background-color: #39f;
            width: 4px;
            height: 20px;
            margin-right: 10px;
            border-radius: 3px;
          "
        ></div>
        <div style="font-size: large">{{ formTitle }}</div>
      </div>
      <div>
        <el-form
          :ref="formRef"
          :model="form"
          :inline="true"
          label-width="80px"
          label-position="top"
          style="margin-left: 20px"
        >
          <template v-for="(item, index) in formList">
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :label-width="item.labelWidth"
              :rules="item.rules"
              v-if="item.vif !== false"
            >
              <component
                :is="item.type"
                v-model="form[item.prop]"
                v-bind="item.components"
                style="width: 12vw"
                v-on="item.components.events"
              >
                <template v-if="item.type === 'el-select'">
                  <el-option
                    v-for="option in item.components.option.list || []"
                    :key="option[item.components.option.key]"
                    :label="option[item.components.option.label]"
                    :value="option[item.components.option.value]"
                  />
                </template>
              </component>
            </el-form-item>
            <slot :name="`dynamic-fields-${item.label}`"></slot>
          </template>
        </el-form>
        <div
          style="display: flex; align-items: center; margin-bottom: 10px"
          v-if="appendix"
        >
          <div
            style="
              background-color: #39f;
              width: 4px;
              height: 20px;
              margin-right: 10px;
              border-radius: 3px;
            "
          ></div>
          <div style="font-size: large">附件信息</div>
        </div>
        <!-- <el-upload
          :action="fileUrl"
          :on-change="handleChange"
          :on-success="uploadData"
          :on-remove="handleRemove"
          :file-list="fileList"
          :before-upload="handleBeforeUpload"
          :headers="headers"
          v-if="appendix"
        >
          <el-button
            icon="el-icon-plus"
            style="width: 15vw; margin-left: 15px"
          />
        </el-upload> -->
        <slot name="fileList"></slot>
        <div style="display: flex; align-items: center; margin: 10px 0 10px 0">
          <div
            style="
              background-color: #39f;
              width: 4px;
              height: 20px;
              margin-right: 10px;
              border-radius: 3px;
            "
          ></div>
          <div style="font-size: large">其他信息</div>
        </div>
        <div>
          <p>备注(200字内)</p>
          <div>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              style="width: 90%"
              maxlength="200"
              :autosize="{ minRows: 7, maxRows: 8 }"
              show-word-limit
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      url: "",
      // https://sdevenfangyi.oss-cn-shanghai.aliyuncs.com/cms/contract/1729581921716-527150619.pdf
      pageTotalNum: 1,
      pageNum: 1,
      loadedRatio: 0,
      isHovered: false, // 新增状态变量，用于控制图标的显示
      document: "",
      appendix: this.appendix,
      fileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      //   {
      //     title: "",
      //   },
      formTitle: this.formTitle,
      formList: this.formList,
      // fileList: this.fileList,
      textarea: this.textarea,
      //   [
      //     {
      //       label: "项目名称",
      //       prop: "name",
      //       type: "el-input",
      //       rules: [{ required: true, message: "项目名称", trigger: "blur" }],
      //       components: {
      //         placeholder: "请输入",
      //         disabled: false,
      //         clearable: true,
      //         style: {
      //           width: "350px",
      //         },
      //       },
      //     },
      //   ],
      form: this.form,
      formRef: this.formRef,
      //   "pdfForm"
    };
  },
  props: {
    //表单元素
    formList: {
      type: Array,
      required: true,
    },
    //表单名称
    formTitle: {
      type: String,
      require: true,
      default: "合同信息",
    },
    //表单数据来源
    form: {
      type: Object,
      required: true,
    },
    //表单ref
    formRef: {
      type: String,
      required: false,
      default: "formRef",
    },
    //图片url
    // url: {
    //   type: String,
    //   require: true,
    // },
    //附件列表
    // fileList: {
    //   type: Array,
    //   require: false,
    // },
    //备注内容
    textarea: {
      type: String,
      require: false,
    },
    //是否显示附件编辑框
    appendix: {
      type: Boolean,
      require: false,
      default: true,
    },
  },
  created() {
    // this.AttachmentDelivery();
  },
  methods: {
    prePage() {
      if (this.pageNum > 1) {
        this.pageNum--;
      } else {
        this.$message({
          message: "已到达第一页",
          type: "warning",
        });
      }
    },
    //附件传递
    // AttachmentDelivery() {
    //   console.log(this.fileList);
    // },
    urlChange() {
      console.log(this.url);
      this.$emit("urlChange");
    },
    //文件类型限制
    // handleBeforeUpload(file) {
    //   const fileName = file.name.split(".");
    //   const fileExt = fileName[fileName.length - 1];
    //   const isTypeOk = fileExt == "pdf";
    //   if (!isTypeOk) {
    //     this.$modal.msgError(`文件格式不正确, 请上传pdf格式文件!`);
    //     return false;
    //   }
    // },
    handleChange() {
      console.log("123123");
    },
    //上传完成的回调
    // uploadData(file) {
    //   console.log("09909");
    //   console.log(file);
    //   this.fileList.push(file);
    //   this.$emit("uploadData", file);
    //   this.url = process.env.VUE_APP_BASE_API + this.url;
    //   console.log("url", this.url);
    // },
    uploadFile(file) {
      console.log("展示附件上传回调", file);
      this.url = process.env.VUE_APP_BASE_API + file.fileName;
      const file02 = file.url.split("/");
      this.document = file02[file02.length - 1];
    },
    //删除文件的回调
    // handleRemove(file) {
    //   console.log("删除文件回调", file);
    //   this.fileList = this.fileList.filter((item) => item.name !== file.name);
    //   console.log("删除文件回调列表", this.fileList);
    //   this.$emit("getFileList", this.fileList);
    // },
    //下载
    download() {
      let url = process.env.VUE_APP_BASE_API + this.url;
      console.log(url);
      window.open(url, "_blank");
    },
    //表单验证事件
    submitForm() {
      console.log(this.$refs[this.formRef]);
      this.$refs[this.formRef].validate((valid) => {
        if (valid) {
          console.log("验证通过");
          this.$emit("verifiedPassed");
        } else {
          console.log("验证不通过");
          this.$emit("verifiedNoPassed");
        }
      });
    },
    //下一页
    nextPage() {
      if (this.pageNum < this.pageTotalNum) {
        this.pageNum++;
      } else {
        this.$message({
          message: "已到达最后一页",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style scoped>
.pdf-container {
  width: 100%;
  height: 600px; /* 可以根据需要调整高度 */
  overflow-y: auto; /* 超出时显示滚动条 */
}
.imageView {
  width: 100%; /* 可以根据需要调整 */
  height: 600px;
  overflow-y: auto;
  position: relative;
}
::v-deep .el-form-item__label {
  line-height: 20px;
}
::v-deep .el-form-item {
  margin-bottom: 18px;
}
</style>
